﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Profile.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="contentPane" runat="server">
    <% if (WebApp.Controllers.ApplicationController.IsMe(ViewData))
       { %>
    <div id='update-status' class="tabControl">
        <script type="text/javascript">
            $(document).ready(function () {
                $('#submit-new-status').click(function () {
                    // Params taken from http://daipratt.co.uk/using-fb-api-to-make-a-full-post-to-a-users-wall/
                    var params = {};
                    params['message'] = $('#input-new-status').val(); ;
                    if (params['message'] == '') return;

                    FB.api('/me/feed', 'post', params, function (response) {
                        if (!response || response.error) {
                            console.log('Error occured posting a message');
                        } else {
                            location.reload();
                        }
                    });
                });
            });


            function facebookReady() {
                var accessToken = $("#authToken").val();

            }

        </script>
        Status:
        <textarea rows='2' cols='4' id='input-new-status'></textarea>
        <input type="button" id='submit-new-status' value='Post' />
    </div>
    <% } %>
    <script type="text/javascript" src="../../Scripts/date.js"></script>
    <script type="text/javascript">

        function getComments(id, elementId, callback) {
            var accessToken = $("#authToken").val();
            var profileId = $("#profileId").val();
            

            var url = "https://graph.facebook.com/" + id + "&access_token=" + accessToken + "&callback=?";
            $.getJSON(url, callback);
        }

        function viewAllComments(id, obj) {
            $("#comments" + id).html("<img width = '25px' height = '25px' src = '/Content/loading.gif'/>");
            getComments(id, $(obj).attr("id"), function (json) {
                var html = "";
                //loop through and within data array's retrieve the message variable.
                $.each(json.comments.data, function (i, fb) {
                    html += "<div class='comment'><div class='commentauthor'><a href=\"/profile/?id="+fb.from.id+"\"><img src='https://graph.facebook.com/" + fb.from.id + "/picture' width='32px' height='32px'/></a></div>" +
                    "<b><a href=\"/profile/?id=" + fb.from.id + "\">" + fb.from.name + "</a></b><br>" + fb.message + "</div>";
                });
                $("#comments" + json.id).html(html);
            });
        }

        function fbFetch(url) {
            //Set Url of JSON data from the facebook graph api. make sure callback is set with a '?' to overcome the cross domain problems with JSON
            var accessToken = $("#authToken").val();
            var profileId = $("#profileId").val();
            var numPosts = 10;
            if (url == null) {
                url = "https://graph.facebook.com/" + profileId + "/<%=ViewData["URLPart"] %>&access_token=" + accessToken + "&callback=?";
            }
            //Use jQuery getJSON method to fetch the data from the url and then create our unordered list with the relevant data.
            $.getJSON(url, function (json) {
                var html = "<div class=\"wallContent\">";
                //loop through and within data array's retrieve the message variable.
                $.each(json.data, function (i, fb) {

                    var msg = (typeof (fb.message) != "undefined") ? fb.message : "";

                    var date = fb.created_time;
                    date = date.replace("+0000", "");
                    var d1 = Date.parse(date);
                    date = d1.toString("M/d/yyyy");

                    if (fb.type == "photo") {

                        var photo;
                        $.getJSON("https://graph.facebook.com/" + fb.object_id + "?access_token=" + accessToken, function (json) {

                            if (json.picture) {
                                $("#image" + json.id).attr("href", json.source);
                            }

                        });
                        //html += "<div class='author'><img id='image" + fb.object_id + "'/><a href='" + fb.link + "'>" + msg + "</a></div><br>";
                        html += "<div class='author'><a href='/profile/?id="+fb.from.id+"'><img src='https://graph.facebook.com/" + fb.from.id + "/picture'/></a></div>";
                        html += "<div class='content'><b><a href=\"/profile/?id=" + fb.from.id + "\">" + fb.from.name + "</a></b> at <span class='date'>" + date + "</span><br><a id='image" + fb.object_id + "' class='lightview'><img src='" + fb.picture + "'/></a><br>" + msg;
                    }

                    else if (fb.link) {
                        //html += "<div class='author'><img src='" + fb.picture + "'/><a href='" + fb.link + "'>" + msg + "</a></div><br>";
                        html += "<div class='author'><a href='/profile/?id=" + fb.from.id + "'><img src='https://graph.facebook.com/" + fb.from.id + "/picture'/></a></div>";
                        if (fb.story) {
                            html += "<div class='content'><b><a href=\"/profile/?id=" + fb.from.id + "\">" + fb.from.name + "</a></b> at <span class='date'>" + date + "</span><br><img src='" + fb.picture + "'/><a href='" + fb.link + "'><br>" + fb.story + "</a>";
                        }
                        else {

                            html += "<div class='content'><b><a href=\"/profile/?id=" + fb.from.id + "\">" + fb.from.name + "</a></b> at <span class='date'>" + date + "</span><br>";
                            
                            if(fb.caption){
                                html+= fb.caption + "<br>";
                            }
                            if( !fb.caption && fb.name){
                                html+= fb.name + "<br>";
                            }
                            if (fb.picture && fb.description) {
                                html += "<img src='" + fb.picture + "' /><a href='" + fb.link + "'><br>" + fb.description + "</a>";
                            }
                            else if (fb.description){
                                html += "<a href='" + fb.link + "'><br>" + fb.description + "</a>";
                            }
                            else if (!fb.picture){
                                html += "<a href='" + fb.link + "'><br>" + msg + "</a>";
                            }
                            else {
                                html += "<img src='" + fb.picture + "' /><a href='" + fb.link + "'><br>" + msg + "</a>";
                            }
                        }
                    }

                    else if (fb.story) {

                        html += "<div class='author'><a href='/profile/?id=" + fb.from.id + "'><img src='https://graph.facebook.com/" + fb.from.id + "/picture'/></a></div>";
                        html += "<div class='content'><b><a href=\"/profile/?id=" + fb.from.id + "\">" + fb.from.name + "</a></b> at <span class='date'>" + date + "</span><br>" + fb.story;
                        if (fb.actions && fb.actions.length > 2) {
                            html += " - <a href='" + fb.actions[2].link + "'>" + fb.story + "</a>";
                        }
                    }
                    else {
                        html += "<div class='author'><a href='/profile/?id=" + fb.from.id + "'><img src='https://graph.facebook.com/" + fb.from.id + "/picture'/></a></div>";
                        html += "<div class='content'><b><a href=\"/profile/?id=" + fb.from.id + "\">" + fb.from.name + "</a></b> at <span class='date'>" + date + "</span><br>" + msg + "<br>";
                    }

                    if (fb.comments && fb.comments.count > 0) {
                        html += "<hr><div id='comments" + fb.id + "'>";

                        for (var i in fb.comments.data) {
                            html += "<div class='comment'><div class='commentauthor'><a href='/profile/?id=" + fb.comments.data[i].from.id + "'><img src='https://graph.facebook.com/" + fb.comments.data[i].from.id + "/picture' width='32px' height='32px'/></a></div>" +
                                "<b><a href=\"/profile/?id=" + fb.comments.data[i].from.id + "\">" + fb.comments.data[i].from.name + "</a></b><br>" + fb.comments.data[i].message + "</div>";
                        }

                        //If there are hidden comments, want to have an option to view all of them
                        if (fb.comments.data && fb.comments.data.length < fb.comments.count) {
                            html += "<a title='View all comments' class='viewallcomments' onclick='viewAllComments(\"" + fb.id + "\", this)'>View all comments</a>";
                        }
                        html += "</div>";
                    }

                    if (fb.actions) {
                        html += "<hr>";

                        if(fb.likes){
                            html+= fb.likes.count + " people +1'd this<br><br>";
                        }
                        html += '<form class="commentBox"><input class="commentText" type="text" />';
                        html += '<input class="commentSubmit" type="button" value="Post" /><input class="commentId" type="hidden" value="' + fb.id + '"/></form>';
                    }
                    html += "</div>";
                    html += "<div class='clear'></div>";
                });
                html += "</div>";
                numPosts += 10;


                html += "<a title='View more' id='foo'>View more</a>";

                $('#foo').remove();
                $('.facebookfeed').append(html);

                $('#foo').click(function () {
                    $("#foo").html("<img width = '25px' height = '25px' src = '/Content/loading.gif'/>"); 
                    fbFetch(json.paging.next + "&access_token=" + accessToken + "&callback=?") 
                });


                //commenting
                $('.commentSubmit').click(function () {
                    var params = {};
                    params['message'] = $(this).siblings('.commentText').val();
                    if (params['message'] == '') return false;

                    var objectId = $(this).siblings('.commentId').val();

                    FB.api(objectId + '/comments', 'post', params, function (response) {
                        if (!response || response.error) {
                            console.log('Error occured posting a message');
                        } else {
                            location.reload();
                        }
                    });
                });

            });

            
        };

    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            fbFetch();
        });
    </script>
    <div class="facebookfeed">
        <h2>
        </h2>
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="contentLinks" runat="server">
</asp:Content>
